<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{payinfo.total_fee}}</text>
		</view>

		<view class="pay-type-list">

			<view class="type-item b-b" @click="changePayType(2)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text></text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payinfo.pay_way == 2' />
					</radio>
				</label>
			</view>



			<!--  #ifdef  APP-PLUS -->
			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
				</view>
				<label class="radio">
					<radio color="#fa436a" :checked='payinfo.pay_way == 1' />
					</radio>
				</label>
			</view>
			<!--  #endif -->




			<view class="type-item" @click="changePayType(9)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额</text>
				</view>
				<label class="radio">
					<radio color="#fa436a" :checked='payinfo.pay_way == 9' />
					</radio>
				</label>
			</view>
		</view>

		<button :disabled="submitting" class="mix-btn" @click="confirm">确认支付</button>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				isfree: 0,
				submitting: false,
				payType: 1,
				orderInfo: {},
				payinfo: {
					"pay_way": 2
				},
				odr_id: ""

			};
		},
		computed: {
			...mapState(['token', 'exp_time', 'hasLogin', 'userInfo'])
		},

		onLoad(options) {
			this.isfree = options.free


			if (options.type) {

				let type = options.type

				switch (type) {
					case "0":
						this.payType = 0
						this.payinfo = JSON.parse(uni.getStorageSync('pay'));

						break;
					case "8":
						this.payType = 8
						let repay = JSON.parse(unescape(options.data))
						this.odr_id = repay.OdrId
						this.payinfo.total_fee = repay.Amount
						break;
				}
			}
		},

		methods: {
			//选择支付方式
			changePayType(type) {
				this.payinfo.pay_way = type;
			},
			//确认支付
			confirm: async function() {

				let _this = this


				if (this.submitting == true) {
					return
				}

				this.submitting = true


				if (this.payinfo) {


					let free = false
					if (this.isfree == 1) {
						free = true
					}


					switch (this.payinfo.pay_way) {
						case 9: // 余额支付

							if (this.payType == 0) { // 首次提交订单


								uni.request({
									url: this.$serverUrl + '/app/order/submit',
									header: {
										"Content-Type": "application/json",
										"Authorization": this.token
									},
									data: {
										"mem_id": this.userInfo.MemId,
										"submit_pro": this.payinfo.submit_pro,
										"total_fee": this.payinfo.total_fee,
										"add_id": this.payinfo.add_id,
										"pay_way": this.payinfo.pay_way,
										"odr_memo": this.payinfo.odr_memo,
										"free_fetch": free
									},
									method: "POST",
									success: (e) => {

										if (e.data.success) {
											uni.redirectTo({
												url: '/pages/money/paySuccess'
											})

										} else {
											uni.showModal({
												content: e.data.message,
												showCancel: false,
												success: function(res) {
													_this.submitting = false
													_this.mn = 0
												}
											})

										}


									},
									fail: (e) => {

										uni.showModal({
											content: "请求失败，请重试！",
											showCancel: false,
											success: function(res) {
												_this.submitting = false
												_this.mn = 0
											}
										})
									},
									complete: () => {
										this.loading = false;
										this.logining = false;
									}
								})



							} else { // 已存在订单，重新发起支付


								uni.request({
									url: this.$serverUrl + '/app/order/pay',
									header: {
										"Content-Type": "application/json",
										"Authorization": this.token
									},
									data: {
										"mem_id": this.userInfo.MemId,
										"odr_id": this.odr_id,
										"pay_way": this.payinfo.pay_way,
									},
									method: "POST",
									success: (e) => {

										if (e.data.success) {

											uni.redirectTo({
												url: '/pages/money/paySuccess'
											})


										} else {

											uni.showModal({
												content: e.data.message,
												showCancel: false,
												success: function(res) {
													_this.submitting = false
													_this.mn = 0
												}
											})

										}



									},
									fail: (e) => {
										uni.showModal({
											content: "请求失败，请重试！",
											showCancel: false
										})
									},
									complete: () => {
										this.loading = false;
										this.logining = false;
									}
								})



							}







							break;
						case 1: // 支付宝支付
						case 2: // 微信支付，支付接口一样
							let url = "/app/order/submit"

							//#ifdef H5
							url += "/wx_web"
							//#endif


							if (this.payType == 0) { // 首次提交订单支付





								uni.request({
									url: this.$serverUrl + url,
									header: {
										"Content-Type": "application/json",
										"Authorization": this.token
									},
									data: {
										"mem_id": this.userInfo.MemId,
										"submit_pro": this.payinfo.submit_pro,
										"total_fee": this.payinfo.total_fee,
										"add_id": this.payinfo.add_id,
										"pay_way": this.payinfo.pay_way,
										"odr_memo": this.payinfo.odr_memo,
										"free_fetch": free
									},
									method: "POST",
									success: (e) => {
										if (e.data.success) {
											
											// 
											// uni.showModal({
											// 	content: e.data.pay_param,
											// 	showCancel: false
											// })
											

											let payProvider = ""
											// 支付宝支付
											if (this.payinfo.pay_way == 1) {
												payProvider = "alipay"
											}
											// 微信支付
											if (this.payinfo.pay_way == 2) {
												payProvider = "wxpay"
											}



											//#ifdef H5
											
											
											// uni.showModal({
											// 	content: e.data.pay_param,
											// 	showCancel: false
											// })
											
											let test = JSON.parse(e.data.pay_param)
											var jweixin = require('weixinj')
											jweixin.config({
												debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
												appId: 'wx0f8ff03cd697d1b6', // 必填，公众号的唯一标识
												timestamp: test.timestamp, // 必填，生成签名的时间戳
												nonceStr: test.noncestr, // 必填，生成签名的随机串
												signature: test.sign, // 必填，签名
												jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
											});
											jweixin.error(function(res) {
												// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

											});
											jweixin.ready(function() {
												
												

												jweixin.chooseWXPay({
													timestamp: test.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
													nonceStr: test.nonceStr, // 支付签名随机串，不长于 32 位
													package: test.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
													signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
													paySign: test.paySign, // 支付签名
													success: function(res) {
														// 支付成功后的回调函数

														uni.redirectTo({
															url: '/pages/money/paySuccess'
														})


													},
													// 支付取消回调函数
													cencel: function(res) {
														_this.submitting = false
														_this.mn = 0
													},
													// 支付失败回调函数
													fail: function(res) {
														_this.submitting = false
														_this.mn = 0
													}
												});

											});
											//#endif



											//#ifdef APP-PLUS


											uni.requestPayment({
												provider: payProvider,
												orderInfo: e.data.pay_param,
												success: function(res) {
													if (res.errMsg == "requestPayment:ok") {
														uni.redirectTo({
															url: '/pages/money/paySuccess'
														})
													} else {
														uni.showModal({
															content: JSON.stringify(err) + "",
															showCancel: false
														})
													}

												},
												fail: function(err) {
													console.log('fail:' + JSON.stringify(err));
													uni.showModal({
														content: "支付发起失败" + JSON.stringify(err),
														showCancel: false
													})
													_this.submitting = false
													_this.mn = 0
												}
											});
											//#endif







										} else {
											uni.showModal({
												content: e.data + "290",
												showCancel: false,
												success: function(res) {
													_this.submitting = false
													_this.mn = 0
												}
											})

										}

									},
									fail: (e) => {

										uni.showModal({
											content: "提交订单失败",
											showCancel: false
										})



									},
									complete: () => {
										this.loading = false;
										this.logining = false;
									}
								})

							} else { // 重新发起订单支付



								uni.request({
									url: this.$serverUrl + '/app/order/pay',
									header: {
										"Content-Type": "application/json",
										"Authorization": this.token
									},
									data: {
										"mem_id": this.userInfo.MemId,
										"odr_id": this.odr_id,
										"pay_way": this.payinfo.pay_way,
									},
									method: "POST",
									success: (e) => {
										if (e.data.success) {
											
											// uni.showModal({
											// 	content: e.data.pay_param,
											// 	showCancel: false
											// })
											console.log(e.data.pay_param)
											

											let payProvider = ""
											// 支付宝支付
											if (this.payinfo.pay_way == 1) {
												payProvider = "alipay"
											}
											// 微信支付
											if (this.payinfo.pay_way == 2) {
												payProvider = "wxpay"
											}


											let test = JSON.parse(e.data.pay_param)


											//#ifdef H5
											var jweixin = require('weixinj')
											jweixin.config({
												debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
												appId: 'wx0f8ff03cd697d1b6', // 必填，公众号的唯一标识
												timestamp: test.timestamp, // 必填，生成签名的时间戳
												nonceStr: test.noncestr, // 必填，生成签名的随机串
												signature: test.sign, // 必填，签名
												jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
											});
											jweixin.error(function(res) {
												// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

											});
											jweixin.ready(function() {

												// uni.showModal({
												// 	title: '提示',
												// 	content: e.data.pay_param,
												// });

												jweixin.chooseWXPay({
													timestamp: test.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
													nonceStr: test.nonceStr, // 支付签名随机串，不长于 32 位
													package: test.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
													signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
													paySign: test.sign, // 支付签名
													success: function(res) {
														// 支付成功后的回调函数

														uni.redirectTo({
															url: '/pages/money/paySuccess'
														})

													},
													// 支付取消回调函数
													cencel: function(res) {
														_this.submitting = false
														_this.mn = 0
													},
													// 支付失败回调函数
													fail: function(res) {
														_this.submitting = false
														_this.mn = 0

													}
												});

											});


											//#endif


											//#ifdef APP-PLUS
											
											
											 
											uni.requestPayment({
												provider: payProvider,
												orderInfo: e.data.pay_param,
												success: function(res) {
													if (res.errMsg == "requestPayment:ok") {
														uni.redirectTo({
															url: '/pages/money/paySuccess'
														})
													}

													console.log('success:' + JSON.stringify(res));
												},
												fail: function(err) {
													console.log('fail:' + JSON.stringify(err));
													uni.showModal({
														content: "支付发起失败" + JSON.stringify(err),
														showCancel: false
													})
													_this.submitting = false
													_this.mn = 0
												}
											});

											//#endif









										} else {
											uni.showModal({
												content: e.data.message,
												showCancel: false,
												success: function(res) {
													_this.submitting = false
													_this.mn = 0
												}
											})

										}





									},
									fail: (e) => {


										uni.showModal({
											content: "提交订单失败",
											showCancel: false
										})



									},
									complete: () => {
										this.loading = false;
										this.logining = false;
									}
								})



							}

							break
					}


				}



			},
		}
	}
</script>

<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
